<template>
  <div class="star-rating">
    <el-rate
      v-model="rating"
      :disabled="disabled"
      :show-text="showText"
      :show-score="showScore"
      :texts="['极差', '失望', '一般', '满意', '惊喜']"
      :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
      @change="handleRatingChange"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  disabled: {
    type: Boolean,
    default: false
  },
  showText: {
    type: Boolean,
    default: true
  },
  showScore: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const rating = ref(props.modelValue)

watch(() => props.modelValue, (newVal) => {
  rating.value = newVal
})

const handleRatingChange = (value) => {
  emit('update:modelValue', value)
}
</script>

<style scoped>
.star-rating {
  display: inline-block;
}
</style>